<template>
    <el-row :gutter="24" class="card_container">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-card shadow="hover" class="card1 cardData" title="用户数">
                <el-icon :size="30">
                    <User />
                </el-icon>
                <div>
                    <p class="card_title">用户数</p>
                    {{ cradData.user }}
                </div>

            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-card shadow="hover" class="card2 cardData">
                <el-icon :size="30">
                    <Coin />
                </el-icon>
                <div>
                    <p class="card_title">销量</p>
                    {{ cradData.user }}
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-card shadow="hover" class="card3 cardData">
                <el-icon :size="30">
                    <Sunny />
                </el-icon>
                <div>
                    <p class="card_title">光照</p>
                    {{ cradData.user }}
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-card shadow="hover" class="card4 cardData">
                <el-icon :size="30">
                    <Document />
                </el-icon>
                <div>
                    <p class="card_title">文档</p>
                    {{ cradData.user }}
                </div>
            </el-card>
        </el-col>

    </el-row>
    <el-row :gutter="24" class="card_container">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <el-card shadow="hover">
                <div id="user"></div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
            <el-card shadow="hover">
                <div id="user1"></div>
            </el-card>
        </el-col>
    </el-row>

</template>

<script lang="ts" setup>
import { onMounted, onBeforeMount, computed } from '@vue/runtime-core';
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

var option: EChartsOption;
var myChart: echarts.ECharts;
var chartDom

var option1: EChartsOption;
var myChart1: echarts.ECharts;
var chartDom1

onMounted(() => {
    chartDom = document.getElementById('user')!;
    myChart = echarts.init(chartDom);
    myChart.setOption(option);
    myChart.on('updateAxisPointer', function (event: any) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption<echarts.EChartsOption>({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    chartDom1 = document.getElementById('user1')!;
    myChart1 = echarts.init(chartDom1);
    myChart1.setOption(option1);
})

option = {
    legend: {},
    tooltip: {
        trigger: 'axis',
        showContent: false
    },
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
        ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
        },
        {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
                focus: 'self'
            },
            label: {
                formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
            }
        }
    ]
};

option1 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ]
};

window.onresize = () => {
    myChart.resize()
    myChart1.resize()
}

const cradData = {
    user: 999,
}

</script>
<style lang="less" scoped>
.card_container {
    margin-top: 15px;

    & .cardData {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & div {
            font-size: 25px;
            float: right;
            padding-left: 100px;

            & p {
                font-size: medium;
                margin-bottom: 15px;
            }
        }
    }

    & .card1 {
        background-color: #02c874;
        transition: all 0.5s;
        color: #fff;
        height: 100px;

        &:hover {
            background-color: #02df82;
        }


    }

    & .card2 {
        background-color: #4f9d9d;
        transition: all 0.5s;
        color: #fff;
        height: 100px;

        &:hover {
            background-color: #5cadad;
        }
    }

    & .card3 {
        background-color: #7373b9;
        transition: all 0.5s;
        color: #fff;
        height: 100px;

        &:hover {
            background-color: #8080c0;
        }
    }

    & .card4 {
        background-color: #ae57a4;
        transition: all 0.5s;
        color: #fff;
        height: 100px;

        &:hover {
            background-color: #b766ad;
        }
    }
}

#user {
    height: 800px;
    width: 100%;
    min-width: 340px;
}

#user1 {
    height: 800px;
    width: 100%;
    min-width: 340px;
}
</style>